<template>
  <div id="safePolicy">
    <el-container>
      <el-main style="padding: 20px 50px">
        <el-form :model="dataForm" :rules="rules" ref="dataForm" class="demo-ruleForm" :disabled="isFirstPage">
          <el-form-item label="密码长度：" prop="sysPassShortLength" class="input-number-220">
            <div class="form-content">
              <el-select v-model="dataForm.sysPassShortLength " placeholder="请选择" size="small">
                <el-option
                    v-for="item in pwdLen"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                ></el-option>
              </el-select>
              <div class="line">
                <span></span>
              </div>
              <el-select v-model="dataForm.sysPassLength" placeholder="请选择" size="small">
                <el-option
                    v-for="item in maxPwdLen"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="密码复杂度：" prop="passCom" class="input-number-360">
            <el-select v-model="dataForm.passCom" placeholder="请选择" size="small">
              <el-option
                  v-for="item in pwdLock"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="最大尝试次数：" prop="sysLoginMaxTryCount" class="input-number-360">
            <el-select v-model="dataForm.sysLoginMaxTryCount" placeholder="请选择" size="small">
              <el-option
                  v-for="item in maxTryCount"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="锁定时间：(分钟)" prop="sysLoginMaxLockTime" class="input-number-360">
            <el-select v-model="dataForm.sysLoginMaxLockTime" placeholder="请选择" size="small">
              <el-option
                  v-for="item in lockTimeList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="登录超时时间：(分钟)" prop="sysOvertime" class="input-number-360">
            <el-select v-model="dataForm.sysOvertime" placeholder="请选择" size="small">
              <el-option
                  v-for="item in outTimeList"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="密码更换周期：(天)" prop="sysPassChange" class="input-number-360">
            <el-select v-model="dataForm.sysPassChange" placeholder="请选择" size="small">
              <el-option
                  v-for="item in changePwdDay"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="input-number-220" v-show="!isFirstPage">
            <el-button size="small" type="primary" @click="submitForm('dataForm')">确定</el-button>
            <el-button size="small" @click="resetForm('dataForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import sysSafePolicy from "./api/sysSafePolicy.service";

export default {
  props: {
    isFirstPage: {type: Boolean, default: false}
  },
  data() {
    return {
      dataForm: {
        sysPassShortLength: "", // 最小密码长度
        sysPassLength: "", // 最大密码长度
        passCom: "", // 密码复杂度
        sysLoginMaxTryCount: "", // 尝试次数
        sysLoginMaxLockTime: "", // 锁定时间
        sysOvertime: "", // 超时时间
        sysPassChange: "", // 修改密码时间
      },
      rules: {
        sysPassShortLength: [
          {required: true, message: "密码长度必填", trigger: "blur"},
        ],
        passCom: [
          {required: true, message: "密码复杂度必须选择", trigger: "blur"},
        ],
        sysLoginMaxTryCount: [
          {required: true, message: "最大登录尝试次数必填", trigger: "blur"},
        ],
        sysLoginMaxLockTime: [
          {required: true, message: "最大锁定时间必填", trigger: "blur"},
        ],
        sysOvertime: [
          {required: true, message: "登录超时必填", trigger: "blur"},
        ],
        sysPassChange: [
          {required: true, message: "密码更换必填", trigger: "blur"},
        ],
      },
      pwdLen: [
              {value: '8'},
              {value: '9'},
              {value: '10'},
              {value: '11'},
              {value: '12'},
              {value: '13'},
              {value: '14'},
              {value: '15'},
              {value: '16'},
              {value: '17'},
              {value: '18'},
              {value: '19'},
              {value: '20'}
        ],
      maxPwdLen: [
        {value: '10'},
        {value: '11'},
        {value: '12'},
        {value: '13'},
        {value: '14'},
        {value: '15'},
        {value: '16'},
        {value: '17'},
        {value: '18'},
        {value: '19'},
        {value: '20'}
      ],
      pwdLock: [
        {
          id: '1',
          value: "密码至少为英文字母、数字的组合",
        },
      ],
      maxTryCount: [{value: '1'}, {value: '2'}, {value: '3'}, {value: '4'}, {value: '5'}],
      lockTimeList: [ {value: '5'}, {value: '10'}, {value: '30'}],
      outTimeList: [{value: '5'}, {value: '10'}, {value: '20'}, {value: '30'}],
      changePwdDay: [{value: '1'}, {value: '2'}, {value: '3'}, {value: '4'}, {value: '5'}, {value: '6'}, {value: '7'}]
    };
  },
  created() {
    this.search();
  },
  methods: {
    submitForm(formName) {
      if(parseInt(this.dataForm.sysPassShortLength)>=parseInt(this.dataForm.sysPassLength)){
        this.$message.error("最小密码长度应小于最大密码长度");
        return;
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          sysSafePolicy.updateSysDictItem(this.dataForm).then((res) => {
            if (res.code === 10200) {
              this.$message.success("修改成功,新的安全策略将会在下次登录后生效");
              this.search()
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.search()
    },
    search() {
      // console.log("初始化！");
      sysSafePolicy.getSafePolicy().then((res) => {
        if (res.code === 10200) {
          // console.log(res);
          this.dataForm.sysPassShortLength = res.data.sysPassShortLength;
          this.dataForm.sysPassLength = res.data.sysPassLength;
          this.dataForm.passCom = res.data.passCom;
          this.dataForm.sysLoginMaxTryCount = res.data.sysLoginMaxTryCount;
          this.dataForm.sysLoginMaxLockTime = res.data.sysLoginMaxLockTime;
          this.dataForm.sysOvertime = res.data.sysOvertime;
          this.dataForm.sysPassChange = res.data.sysPassChange;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
};
</script>

<style>
#safePolicy .el-form-item__label {
  width: 100%;
  text-align: left;
  font-weight: bold;
  line-height: 20px;
}

#safePolicy .input-number-220 {
  width: 360px;
  text-align: right;
}

#safePolicy .input-number-360 .el-select {
  width: 360px;
}

#safePolicy .form-content {
  display: inline-block;
}

#safePolicy .form-content .el-select {
  display: inline-block;
  width: 150px;
}

#safePolicy .line {
  display: inline-block;
  width: 50px;
  height: 2px;
  background: #333;
}

.el-select-dropdown__list {
  max-width: 100% !important;
}

/* #safePolicy .el-input {
    width: 100%;
  } */
#safePolicy .el-form-item .el-form-item__content {
  /* display: flex!important; */
}

#safePolicy .el-form-item .el-form-item__content p {
  /* padding-left: 10px;
    font-size: 14px;
    color: #409EFF; */
}
</style>
